<template>
  <el-row class="home" :gutter="20">
    <el-col :span="8" style="margin-top: 15px">
      <el-card shadow="hover" style="height: 220px">
        <div class="user">
          <img :src="userImg" alt="" class="userImg">
          <div class="userInfo">
            <p class="name">admin</p>
            <p class="access" style="font-size: 15px; color:gray">超级管理员</p>
          </div>
        </div>
        <div class="login-info" style="color: gray">
         <!-- <p class="pTime">登陆时间： <span style="color: #666666;">{{this.data_time}}</span></p> -->
          <p class="pTime">上次登陆地点： <span class="sTime">浙江·杭州</span></p>
        </div>
      </el-card>
<!--      <el-card shadow="hover" style="height: 400px; margin-top: 15px">-->
<!--        <el-table :data="tableData" stripe style="width: 100%" @row-dblclick="goSearch">-->
<!--          <el-table-column prop="date_time" label="日期" width="300" show-overflow-tooltip></el-table-column>-->
<!--          <el-table-column prop="search_word" label="查询关键字" width="200" show-overflow-tooltip></el-table-column>-->

<!--        </el-table>-->
<!--      </el-card>-->
    </el-col>
    <!-- <el-col :span="16">
      <div class="num" style="margin-top: 15px">
        <el-card shadow="hover" class="count" style="background-color: #999999; height: 220px"></el-card>
        <el-card shadow="hover" class="count" style="background-color: #999999; height: 220px"></el-card>
        <el-card shadow="hover" class="count" style="background-color: #999999; height: 220px"></el-card>
      </div>

    </el-col> -->
    <el-col :span="24">
      <el-card shadow="hover" style="height: 580px;margin-top: 15px;">
        <div ref="refChart" style="width: 100%; height: 500px"></div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>

import * as echarts from "echarts"
import "echarts-gl"
import {request} from "../../network/2";

export default {
  data() {
    return {
      userImg: require("../../assets/administer.jpeg"),
      data_time:"",
      // tableData: [{
      //   last_update_date: '2021-12-02 12:23:34',
      //   facility: '高压辊磨电机2#',
      //   state: '良好'
      // }, {
      //   last_update_date: '2021-12-02 15:11:34',
      //   facility: '辊磨2号变频器控制柜(活动辊高压)',
      //   state: '良好'
      // }, {
      //   last_update_date: '2021-12-02 15:11:34',
      //   facility: '高压辊磨开度阀电机2#',
      //   state: '良好'
      // },],
      tableData: []

    }
  },
  name: "Home",
  mounted() {
    this.init()
  },
  // created() {
  //   this.getRes()
  //   this.getRes2()
  //   console.log('+++++++++++++++++++++++')
  //   console.log(this.data_time)
  // },
  methods: {
    async getRes() {
      let res = await request("/first",)
      console.log(res);
      this.data_time = res.data.time
    },
    async getRes2(){
      let res = await request("/data_first")
      this.tableData = res.data
    },
    goSearch(row_data){
      this.$router.push({name:"device_query", params:{id: row_data.search_word}})
    },
    init(){
      var ROOT_PATH =
          'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';

      var myChart = echarts.init(this.$refs.refChart);
      var option;

      var sin = Math.sin;
      var cos = Math.cos;
      var pow = Math.pow;
      var sqrt = Math.sqrt;
      var cosh = Math.cosh;
      var sinh = Math.sinh;
      var PI = Math.PI;
      var aa = 0.4;
      var r = 1 - aa * aa;
      var w = sqrt(r);
      option = {
        tooltip: {},
        visualMap: {
          show: false,
          dimension: 2,
          min: -5,
          max: 5,
          inRange: {
            color: [
              '#313695',
              '#4575b4',
              '#74add1',
              '#abd9e9',
              '#e0f3f8',
              '#ffffbf',
              '#fee090',
              '#fdae61',
              '#f46d43',
              '#d73027',
              '#a50026'
            ]
          }
        },
        xAxis3D: {},
        yAxis3D: {},
        zAxis3D: {},
        grid3D: {
          show: false,
          postEffect: {
            enable: true,
            SSAO: {
              enable: true,
              radius: 4,
              quality: 'high',
              intensity: 1.5
            }
          },
          temporalSuperSampling: {
            enable: true
          },
          light: {
            main: {
              intensity: 2,
              shadow: true
            },
            ambient: {
              intensity: 0
            },
            ambientCubemap: {
              texture: ROOT_PATH + '/data-gl/asset/canyon.hdr',
              exposure: 2,
              diffuseIntensity: 0.2,
              specularIntensity: 3
            }
          }
        },
        series: [
          {
            type: 'surface',
            parametric: true,
            silent: true,
            wireframe: {
              show: false
            },
            shading: 'realistic',
            realisticMaterial: {
              roughness: 0.2,
              metalness: 1
            },
            parametricEquation: {
              u: {
                min: -13.2,
                max: 13.2,
                step: 0.2
              },
              v: {
                min: -37.4,
                max: 37.4,
                step: 0.2
              },
              x: function (u, v) {
                var denom = aa * (pow(w * cosh(aa * u), 2) + aa * pow(sin(w * v), 2));
                return -u + (2 * r * cosh(aa * u) * sinh(aa * u)) / denom;
              },
              y: function (u, v) {
                var denom = aa * (pow(w * cosh(aa * u), 2) + aa * pow(sin(w * v), 2));
                return (
                    (2 *
                        w *
                        cosh(aa * u) *
                        (-(w * cos(v) * cos(w * v)) - sin(v) * sin(w * v))) /
                    denom
                );
              },
              z: function (u, v) {
                var denom = aa * (pow(w * cosh(aa * u), 2) + aa * pow(sin(w * v), 2));
                return (
                    (2 *
                        w *
                        cosh(aa * u) *
                        (-(w * sin(v) * cos(w * v)) + cos(v) * sin(w * v))) /
                    denom
                );
              }
            }
          }
        ]
      };
      option && myChart.setOption(option);
    }
  }
}
</script>

<style scoped>
.userImg {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.user {
  padding-bottom: 10px;
  border-bottom: solid #2c3e50;
  margin-bottom: 10px;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
}

.name {
  font-family: "Arial", Times, Sans-serif;
  font-size: 40px;
  margin: 5px;
}

.pTime {
  line-height: 28px;
  font-size: 14px;
  color: #999999;
}

.sTime {
  color: #666666;
  margin-left: 60px;
}
.num{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.count{
  width: 30.3%;
  height: 100px;
}
.graph{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

</style>